<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>操作指引</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div class="train-opera-detail-wrapper" v-if="TRAIN_CONTENT_CONFIG[type]">
        <e-heading class="train-opera-header">{{TRAIN_CONTENT_CONFIG[type].title}}</e-heading>
        <div v-for="(item, index) in TRAIN_CONTENT_CONFIG[type].content" :key="index">
          <h3 class="detail-title" v-if="item.title">{{item.title}}</h3>
          <div class="text-wrapper">
            <p class="detail-text" v-for="(text, tIndex) in item.text" :key="tIndex">{{text}}</p>
          </div>
          <div class="detail-img" v-if="item.imgUrl">
            <img :src="item.imgUrl"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const TRAIN_CONTENT_CONFIG = {
    'trainmanage': {
      title: '培训管理具体操作流程',
      content: [
        {
          title: '第一步 设置校区',
          text: [
            '在”校区列表“点击”新增校区“，可设置校区。若培训机构只有一个校区，那么设置一个即可。'
          ],
          imgUrl: '/static/images/help/train/trainmanage_01.jpg'
        },
        {
          title: '第二步 发布课程',
          text: [
            '1、点击“发布课程”，选择运动类目后，进入“填写详情”页面，根据页面提示一项项填写课程信息。注：需先设置至少一个校区，才能发布课程。',
            '2、填写完课程信息，提交成功后，进入审核状态。我们会在1个工作日内完成审核，若审核通过，课程直接上架，若审核不通过，那么需要重新填写课程信息进行再次审核。'
          ],
          imgUrl: '/static/images/help/train/trainmanage_02.jpg'
        },
        {
          title: '第三步 设置教练',
          text: [
            '在”教练列表“页面点击”新增教练“，可设置教练。'
          ],
          imgUrl: '/static/images/help/train/trainmanage_03.jpg'
        },
        {
          title: '第四步 编排班级（专业课、综合课需要此步骤）',
          text: [
            '1、在“课程列表”或“班级列表”点击”新增班级“，可设置课程的分班及班级信息。',
            '2、班级设置成功后，在“班级列表”页面可查看到班级列表，点击“班级名称”，进入“班级详情”页面。',
            '3、在“班级详情”页面点击“添加学员”按钮，即可将已报名该课程的学员编排进该班级。'
          ],
          imgUrl: '/static/images/help/train/trainmanage_04.jpg'
        },
        {
          text: [
            '以上，完成编排某个课程的班级的操作流程。'
          ]
        }
      ]
    },
    'functional': {
      title: '功能演示',
      content: [
        {
          title: '培训管理',
          text: ['培训管理主要包括：发布、课程、班级、教练、学员、校区列表及课程表七大模块。'],
          imgUrl: '/static/images/help/train/functional_01.jpg'
        },
        {
          title: '发布课程',
          text: ['发布课程到求苗平台'],
          imgUrl: '/static/images/help/train/functional_02.jpg'
        },
        {
          title: '课程列表',
          text: ['查看已经发布的课程。'],
          imgUrl: '/static/images/help/train/functional_03.jpg'
        },
        {
          title: '班级列表',
          text: ['新增、查看、编辑已编排好的班级信息。'],
          imgUrl: '/static/images/help/train/functional_04.jpg'
        },
        {
          title: '教练列表',
          text: ['对教练进行新增、查看、编辑、请假等操作。'],
          imgUrl: '/static/images/help/train/functional_05.jpg'
        },
        {
          title: '学员列表',
          text: ['对学员进行新增、查看、编辑、请假、补课等操作。'],
          imgUrl: '/static/images/help/train/functional_06.jpg'
        },
        {
          title: '校区列表',
          text: ['新增、查看、编辑各校区。'],
          imgUrl: '/static/images/help/train/functional_07.jpg'
        },
        {
          title: '课程表',
          text: ['查看培训机构各个班的课程信息。'],
          imgUrl: '/static/images/help/train/functional_08.jpg'
        }
      ]
    }
  }
  export default {
    computed: {
      type () {
        return this.$route.query.type
      }
    },
    data () {
      return {
        TRAIN_CONTENT_CONFIG
      }
    },
    beforeDestroy () {
      this.$store.commit('LAYOUT_GRID', true)
    },
    created () {
      // 隐藏侧边栏
      this.$store.commit('LAYOUT_GRID', false)
      if (!this.TRAIN_CONTENT_CONFIG[this.type]) {
        this.TRAIN_CONTENT_CONFIG[this.type] = {}
        this.$message({
          message: '参数错误',
          type: 'error'
        })
      }
    }
  }
</script>
<style>
</style>

<style lang="scss" scoped>
  .train-opera-detail-wrapper{
    .train-opera-header{
      margin-top: 0;
    }
    .detail-title{
      font-size: 18px;
      font-weight: 700;
    }
    .text-wrapper{
      margin-top:10px;
      margin-bottom:20px;
      .detail-text{
        font-size: 14px;
        line-height: 20px;
      }
    }
    .detail-img{
      margin-bottom: 60px;
      text-align: center;
      img{
        width: 100%;
      }
    }
  }
</style>
